<template>
	<view class="container">
		<view class="bar">
			<xk-header :headerbg="true" class="header" :back="true" title="车辆预约"></xk-header>
			<!--搜索框 start-->
			<view class="search-box">
				<u-search shape="square" placeholder="单号/用车人/电话" height="42" :showAction="false" v-model="search" @search="searchHandle"></u-search>
			</view>
			<!--搜索框 end-->

			<!-- 导航栏 start -->
			<u-tabs
				 :current="tabIndex"
				 :list="tabs"
				 @click="clickTabs"
				 lineWidth="40"
				 lineColor="#f56c6c"
				 :activeStyle="{
					 color: '#000000',
					 fontWeight: 'bold',
					 transform: 'scale(1.15)'
				 }"
				 :inactiveStyle="{
					 color: '#303133',
					 transform: 'scale(1.15)'
				 }"
				 itemStyle="padding-left: 15px; padding-right: 15px;height:45px;width:25%;"
			 ></u-tabs>
			 <!-- 导航栏 end -->
		</view>
		<!--查询日期 start-->
		<view class="select-search-btn">
			<u-row>
				<u-col span="4" offset="1">
					<view @click="showDate= true">
						<u--text suffixIcon="arrow-down-fill" size="16" bold iconStyle="font-size:15px;margin-left:2px;" :text="valueDate[tabIndex].date||'全部'"></u--text>
					</view>
					<u-datetime-picker
						:show="showDate"
						v-model="valuePickerDate"
						mode="year-month"
						@cancel="cancelDate"
						@confirm="confirmDate"
						@close="closeDate"
						:closeOnClickOverlay="true"
					></u-datetime-picker>
				</u-col>
				<u-col span="2"><view @click="resetSort()">重置</view></u-col>
			</u-row>
		</view>
		<!--查询日期 end-->

		<!--列表 start-->
		<swiper :current="tabIndex" class="list-swiper-other"
			@change="(e)=>{tabIndex = e.target.current;}"
			style="height: 100%;"
			>
			<swiper-item v-for="(tabItem, tabIndex) of tabs" :key="tabIndex">
				<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="pullDownRefresh" scroll-y style="height: 100%;" @scrolltolower="bottom">
					<view v-if="tabItem.data.length > 0" class="list-info">
						<view v-for="(item,index) of tabItem.data" :key="item.id" class="data-list">
							<view class="title">申请单号：{{item.no}}</view>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="4"><text class="grey-text">用车人：</text></u-col>
									<u-col span="8">{{item.name}}</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="4"><text class="grey-text">用车人电话：</text></u-col>
									<u-col span="8">{{item.phone}}</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="4"><text class="grey-text">用车性质：</text></u-col>
									<u-col span="8">{{item.info}}</u-col>
								</u-row>
								<view class="list-btn">
									<u-row customStyle="margin-bottom: 10px">
										<u-col span="12" v-if="type == 'get'"><view class="btn-name btn-type-getAndDeal" @click="sendOrders(item)">查看详情</view></u-col>
										<u-col span="12" v-else-if="type == 'deal'"><view class="btn-name btn-type-getAndDeal" @click="sendOrders(item)">审批中</view></u-col>
										<u-col span="12" v-else-if="type == 'finish'"><view class="btn-name btn-type-finish" @click="sendOrders(item)">已完成</view></u-col>
									</u-row>
								</view>
							</view>
						</view>
						<view class="empty-view" v-else>
							<image class="empty-icon" src="/static/empty_data_icon.png"></image>
							<view>哎呀，该界面暂无内容~</view>
						</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 新增按钮 start -->
		<view class="hand-on">
			<u-button @click="applyCar" type="primary" text="用车申请" customStyle="width: 95%;margin-top: 24rpx;border-radius: 23px;"></u-button>
		</view>
		<!-- 新增按钮 end -->

		<!--列表 end-->
		<view style="height: 50rpx;"></view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					name: '申请中',
					index: 0,
					type: 'get',
					data: [
						{
							id:1,
							no: 'YY202208007',
							name: '今天不上班',
							phone: '1234456654',
							info: '出差'
						}
					]
				},
				{
					name: '待办',
					index: 1,
					type: 'deal',
					data: [
						{
							id:1,
							no: 'YY202208008',
							name: '今天不上班',
							phone: '1234456654',
							info: '出差'
						}
					]
				},
				{
					name: '已完成',
					index: 2,
					type: 'finish',
					data: [
						{
							id:1,
							no: 'YY202208009',
							name: '今天不上班',
							phone: '1234456654',
							info: '出差'
						}
					]
				}],
				tabIndex :0,
				showDate: false,
				valuePickerDate: uni.$u.timeFormat(Number(new Date()), 'yyyy-mm'),
				triggered: false,
				type: 'get',
				search:'',
				valueDate: [{
					date:'',
				}, {
					date:'',
				}, {
					date:'',
				}, {
					date:'',
				}],
			};
		},
		methods: {
			//用车申请
			applyCar() {
				uni.navigateTo({
					url: '/pages/wuYe/applyCar'
				})
			},

			//搜索框
			searchHandle(){

			},

			click(item) {

			},
			//切换导航栏
			clickTabs(item) {
				this.tabIndex = item.index;
				this.type = item.type
			},

			//日期选择弹框
			cancelDate() {
				this.showDate = false;
			},
			confirmDate(e) {
				this.showDate = false;
			},
			closeDate() {
				this.showDate = false
			},

			//重置
			resetSort() {

			},

			//下拉刷新
			pullDownRefresh() {

			},

			//触底翻页
			bottom() {

			},

			//派单按钮
			sendOrders(e) {

			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: rgba(246, 247, 251, 1);
		height: 100vh;
		.bar {
			width: 100%;
			background-color: #FFFFFF;
		}
		.select-search-btn {
			margin:15px 0px 10px 10px;
		}
		.list-swiper-other {
			background-color: #f7f7f7;
			border-radius: 20rpx;
		}
		.data-list {
			background:#FFFFFF;
			padding:20px 10px 0px 10px;
			margin:10px;
			border-radius:5px;
			font-size:15px;
			.title {
				font-size:17px;
				font-weight:bold;
				color:#333333;
				margin-bottom:15px;
			}
			.grey-text {
				color:#999999;
			}
			.list-btn {
				text-align: center;
				border-top:1px solid #F5F5F5;
				height:104rpx;
				line-height:104rpx;
				color:#000000;
				font-size:34rpx;
				font-weight:bold;
				.btn-name {
					text-align:center;
					color: #0055FE;
				}
				.btn-type-getAndDeal {
					color: #0055FE;
				}
				.btn-type-finish {
					color: #BDBDBD;
				}
			}
		}
		.search-box{
			padding:10px 15px 10px 15px;
		}
	}
	.list-info {
		margin: 0 20rpx;
		padding-bottom: 30rpx;
	}
	.empty-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 200rpx 0rpx;
		color: #333;
		font-size: 28rpx;
		.empty-icon {
			width: 420rpx;
			height: 420rpx;
		}
	}
	.hand-on {
		position: fixed;
		height: 120rpx;
		background-color: #FFFFFF;
		width: 100%;
		bottom: 0;
	}
</style>
